<template>
    <view class="page-content">
        <navbar fixed leftIcon="left" :title="shopName" shadow></navbar>
        <view class="m-t-15">
            <view class="m-auto bg_678 h166 rel" :style="`width:calc(100vw - 40rpx);border-radius: 10px;overflow: hidden;background-image:url(${bannerInfo.nftData.image});`">
                 <view class="h55 abs justify-between view flex-row align-center   m-b-13 bg-000 width100">
                        <view class="m-l-10">
                            <view class="c-fff fz-12 m-b-3">{{bannerInfo.nftData.nft_name}}</view>
                            <view class="view flex-row align-center">
                                <view class="fz-12 c_4e6 bold m-r-4">限量{{bannerInfo.nftData.inventory}}份</view>
                                <image src="/static/img4/fire.png" class="w16 h16 m-r-5"/>
                                <image src="/static/img4/fire.png" class="w16 h16 m-r-5"/>
                                <image src="/static/img4/fire.png" class="w16 h16 "/>
                            </view>
                        </view>
                        <view class="bg_91a c-fff view align-center justify-center h30 w120 m-r-10" style="border-radius:10px;">购买</view>
                </view>
            </view>

            <view class="m-l-20 m-r-20">
				<view class="view flex-row align-center justify-between m-t-13 m-b-10">
                    <view class="view flex-row align-center ">
                        <view class="c-0D1 fz-14 m-r-6">价格排序</view>
                        <uni-icons custom-prefix="iconfont" type="icon-sanjiaojiantou1" size="8" color="#D3D3D3"></uni-icons>
                    </view>

                    <view class="view flex-row align-center ">
                        <view class="c-0D1 fz-14 m-r-6">上架时间</view>
                        <uni-icons custom-prefix="iconfont" type="icon-sanjiaojiantou1" size="8" color="#D3D3D3"></uni-icons>
                    </view>

                    <view class="view flex-row align-center">
                        <view class="c-0D1 fz-14 m-r-6">销量排序</view>
                        <uni-icons custom-prefix="iconfont" type="icon-sanjiaojiantou1" size="8" color="#D3D3D3"></uni-icons>
                    </view>
                </view>

                <view class="view flex-row align-center m-t-10 m-b-19">
                    <view style="max-width:30%;" class="c-6b6 fz-12 bg-fff m-r-8 h28 flex-1 view align-center justify-center" v-for="(item,index) in tag" :key="index">{{ item.name }}</view>
                </view>

				<view class="view flex-row align-center flex-wrap m-auto" style="width:calc(100vw - 40rpx);">

					<view class="m-b-15 list-item" style="width:calc(50% - 40rpx);" v-for="(item,index) in nftList" :key="index" @click="toShopDetail(item.nftData.id)">
						<image class=" m-b-10 width100 h145 " style="border-radius:20rpx;" :src="item.nftData.image"></image>
						<view class="c_0a1 fz-12 bold">{{item.nftData.nft_name}}</view>
						<view class="fz-14 c-ec2">{{item.nftData.price}} YPT</view>
					</view>

				</view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapState, mapGetters} from 'vuex';
import navbar from '@/components/uni-nav-bar'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import elButton from '@/components/el-button/el-button'
import noData from '@/components/noData/noData'
import sibList from '@/components/sib-list/sib-list.vue'
import uswitch from '@/components/uni-switch/index.vue'
import { getTagDetail } from '@/apis/shop'

export default {
    components: {
      navbar,
      uniEasyinput,
      uniIcons,
      uswitch
	},
    data() {
        return {
			val: true,
			shopName: '',
			bannerInfo: {},
			nftList: [],
			tag: []
        }
    },
	computed: {
	},
	onLoad(options) {
	  const { shopName, merchants_id } = options
	  this.shopName = shopName
	  this.merchants_id = merchants_id
	  this.getShopInfo()
	},
    methods: {
		toShopDetail(id) {
			uni.navigateTo({
				 url: `/pages/shop/goodsDetail?nft_id=${id}`
			});
		},
		async getShopInfo() {
			const res = await getTagDetail({merchants_id: this.merchants_id})
			this.tag = res.data.tag
			this.nftList = res.data.nft
			this.bannerInfo = res.data.nft[0]
		},
		changeSwitch(val) {
			console.log(val)
		}
    }
    
};
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}
.abs {position: absolute;bottom: -20rpx;left: 0;}
page {
    background: #F6F6F6;
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.list-item:nth-child(odd) {margin-right: 30rpx;}
.btn-c {
    display: block;
    margin-top:56rpx;
    width: 100%;
    height: 96rpx;
    line-height: 78rpx;
    font-size: 40rpx;
}
.popupCenter,.popupsCenter,.popupCenters{
		position: fixed;
		top: 34%;
		left:10%;
		right:50%;
		width: 600rpx;
		margin: 0 auto;
		// height: 360rpx;
		border-radius: 20rpx;
		color: #333;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.center_title{
			width: 100%;
			text-align: center;
			margin: 20rpx auto;
			font-size: 36rpx;
			color: #333333;
			font-weight:700;
		}
		.center_content{
			width: 80%;
			text-align: center;
			margin: 20rpx auto;
			margin-bottom: 34rpx;
			// font-size: 38rpx;
		}
		.center_button{
			width: 98%;
			height: 100rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ffffff;
			// border-top: #dddddd;
			button{
				background: #ffffff;

				width: 48%;
				font-size: 34rpx;
				// border:#FFFFFF solid 1rpx;
			}
			.btn1{
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ffffff;
				width: 100%;
				border-top:#ddd solid 1rpx;
				// border-right:#ddd solid 1rpx;
				border-bottom-left-radius: 20rpx;
			}
			.btn2{
				overflow: hidden;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ffffff;
				width: 100%;
				border-top:#ddd solid 1rpx;
				border-left:#ddd solid 1rpx;
				border-bottom-right-radius: 20rpx;
				color: #634DFF;
			}
		}

	}
	.popupsCenter{
		width: 600rpx;
		// height: 690rpx;
		top: 20%;
		left:10%;
		right:50%;
		.center_title{
			width: 100%;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 14rpx;
			font-size: 38rpx;
			color: #333333;
		}
		.center_text{
			width: 100%;
			// height: 70%;
			margin: 60rpx auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			input{
				width: 80%;
				margin: 0 auto;
				font-size: 30rpx;
				color: #AAAAAA;
				height: 70rpx;
				border-bottom: 2rpx solid #ddd;
				margin-bottom: 30rpx;
			}
			.text-right{
				text-align: right;
				width: 80%;
				font-size: 26rpx;
				color: #5D5FFC;
				margin-top: -24rpx;
			}
		}
		.tips{
			width: 80%;
			color: #848484;
		}
		.input-frame{
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #aaa;
			.input-input{
				flex: 1;
				font-size: 30rpx;
				padding-right: 14rpx;
			}
			.input-btn{
				font-size: 30rpx;
				color: #5D5FFC;
			}
		}
	}
	// .popupCenters{
	// 	// height: 290rpx;
	// }
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
</style>
